<template>
  <!-- 平台音乐管理 路由组件 -->
  <div class="platform-music">
    <!-- 小小的一个搜索框 -->
    <div class="filter-ipt">
      <CustomInput placeholder="歌名过滤" @keyup="keyupHandler"></CustomInput>
      <el-button
        style="margin-left: 0.5rem"
        type="primary"
        icon="el-icon-upload2"
        @click="visible = true"
        >上传音乐</el-button
      >
    </div>
    <!-- 表格 -->
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>歌名</th>
            <th>演唱者</th>
            <th class="online">在线播放</th>
            <th>会员专享</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="music in musicSlice" :key="music.musicId">
            <td>{{ music.name }}</td>
            <td>{{ music.author }}</td>
            <td class="online">
              <audio preload="metadata" muted controls :src="music.src"></audio>
            </td>
            <td>否</td>
            <td class="operations">
              <a
                @click="musicUpDown(music)"
                href="javascript:;"
                :class="music.state ? 'down' : ''"
                >{{ music.state ? "上架" : "下架" }}</a
              >
              <a
                @click="BACKDELETEMUSIC(music.musicId)"
                href="javascript:;"
                style="margin-left: 0.1rem"
                >删除</a
              >
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页器 -->
    <div class="page-container">
      <span class="prev" :class="isPrev ? 'disabled' : ''" @click="prev"
        >上一页</span
      >
      <ul class="pages">
        <li
          class="page"
          v-for="(page, index) in pages"
          :key="`${page}-${index}`"
          :class="index + 1 === pageIdx ? 'active' : ''"
          @click="changePageIdx(index + 1)"
        >
          {{ page }}
        </li>
      </ul>
      <span class="next" :class="isNext ? 'disabled' : ''" @click="next"
        >下一页</span
      >
      <span class="total" style="margin-left: 0.3rem"
        >共{{ musicData.length }}条</span
      >
    </div>

    <!-- 添加平台音乐弹出层 -->
    <FormToast
      title="添加平台音乐"
      :visible="visible"
      @close="closeHandler"
    ></FormToast>
  </div>
</template>

<script>
import FormToast from "@/components/public/FormToast.vue";
import CustomInput from "@/components/public/CustomInput";
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  name: "PlatformMusic",
  components: { CustomInput, FormToast },
  data() {
    return {
      page_nums: 10,
      pageIdx: 1,
      filterVal: "",
      visible: false,
    };
  },
  methods: {
    /* 音乐上下架业务处理 */
    ...mapActions("music", ["musicUpDown"]),
    /* 后台音乐删除 */
    ...mapMutations("music", ["BACKDELETEMUSIC"]),
    /* 关闭当前弹出层 */
    closeHandler(value) {
      this.visible = value;
    },
    /* 获取筛选框的值 */
    keyupHandler(value) {
      this.filterVal = value;
    },
    /* 改变页码 */
    changePageIdx(pageIdx) {
      this.pageIdx = pageIdx;
    },
    /* 上一页 */
    prev() {
      if (this.pageIdx === 1) return;
      this.pageIdx--;
    },
    /* 下一页 */
    next() {
      if (this.pageIdx === this.pages) return;
      this.pageIdx++;
    },
  },
  computed: {
    ...mapState("music", ["musicData"]),
    /* 计算是否处于过滤状态 */
    // isFilter() {
    //   this.filterVal ? true : false;
    // },
    /* 计算有多少页 */
    pages() {
      return Math.ceil(this.musicData.length / this.page_nums);
    },
    /* 是否可以上一页 */
    isPrev() {
      return this.pageIdx === 1;
    },
    /* 是否可以下一页 */
    isNext() {
      return this.pages === this.pageIdx;
    },
    /* 根据页码和每页的长度以及筛选字段展示表格数据 */
    musicSlice() {
      const filterArr = this.musicData.filter(
        (x) => x.name.indexOf(this.filterVal) !== -1
      );
      return filterArr.slice((this.pageIdx - 1) * 10, 10 * this.pageIdx);
    },
  },
};
</script>

<style lang="less" scoped>
.platform-music {
  margin-top: 0.5rem;

  .filter-ipt {
    margin-bottom: 0.5rem;
  }
  .table {
    height: 10rem;
    overflow: auto;
    padding-bottom: 0.5rem;
    table {
      border-collapse: collapse;
      letter-spacing: 1px;
      font-family: sans-serif;
      font-size: 0.3rem;
      height: 100%;
      box-sizing: border-box;
      td,
      th {
        border: 1px solid rgb(190, 190, 190);
        padding: 0.1rem 0.3rem;
        text-align: center;
      }
      tbody {
        td {
          font-size: 0.2rem;

          a {
            background-color: #f56c6c;
            padding: 00.05rem;
            border-radius: 000.05rem;
            color: #ffffff;
            &.down {
              background-color: #67c23a;
            }
          }
        }
        tr {
          &:hover {
            background-color: rgba(255, 255, 255, 0.204);
          }
        }
      }
    }
  }
  .page-container {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    .prev,
    .next,
    .page {
      background-color: rgb(104, 104, 104);
      padding: 0.1rem;
      cursor: pointer;
      border-radius: 00.05rem;
    }
    .prev,
    .next {
      &.disabled {
        background-color: rgba(104, 104, 104, 0.579);
        cursor: no-drop;
      }
    }
    .pages {
      display: flex;
      .page {
        margin-left: 0.05rem;
        width: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active {
          background-color: #67c23a;
        }
        &:last-child {
          margin-right: 0.05rem;
        }
      }
    }
  }
}
@media screen and (max-width: 1060px) {
  .online {
    display: none !important;
  }
  table,
  td {
    font-size: 0.1rem !important;
  }
  // .operations {
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: center;
  // }
}
</style>